<script setup>
import { useBannerStore } from '@/stores/banner'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
const bannerStore = useBannerStore()
const { bannerList } = storeToRefs(bannerStore)

const props = defineProps({
  distributionSite: String
})
const loading = ref(true)

// 监听 bannerList 的变化
watch(
  bannerList,
  (newList) => {
    // 当 bannerList 有数据时关闭 loading
    if (newList && newList.length > 0) {
      loading.value = false
    }
  },
  { immediate: true } // 立即执行一次，检查当前是否已有数据
)
</script>

<template>
  <div
    class="home-banner"
    :class="{ position: props.distributionSite !== '2' }"
    v-loading="loading"
  >
    <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.home-banner {
  width: 1240px;
  height: 500px;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
.position {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
